<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram - Rectangle Track</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates for the rectangle corners based on the image labels
    const B = { x: 50, y: 50 };
    const A = { x: 450, y: 50 };
    const C = { x: 50, y: 250 };
    const D = { x: 450, y: 250 };
    const rectWidth = A.x - B.x;

    // Draw the rectangle
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.moveTo(A.x, A.y);
    ctx.lineTo(B.x, B.y);
    ctx.lineTo(C.x, C.y);
    ctx.lineTo(D.x, D.y);
    ctx.closePath();
    ctx.stroke();

    // Set font style for labels
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillStyle = 'black';

    // Draw corner labels, positioned outside the corners as in the original image.
    // Label B (Top-Left)
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('B', B.x - 5, B.y - 5);

    // Label A (Top-Right)
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('A', A.x + 5, A.y - 5);

    // Label C (Bottom-Left)
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('C', C.x - 5, C.y + 5);

    // Label D (Bottom-Right)
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText('D', D.x + 5, D.y + 5);
    
    // Calculate and draw point O
    // According to the problem, 甲 (Jia, 5 m/s) and 乙 (Yi, 3 m/s) start at A, run in opposite directions, and meet at O.
    // Jia must take the longer path: A -> B -> C -> O. Yi takes the shorter path: A -> D -> O.
    // Let L be the length (AB=CD) and W be the width (BC=AD).
    // dist_Jia / dist_Yi = v_Jia / v_Yi = 5/3
    // (L + W + CO) / (W + DO) = 5/3.
    // We know DO = L - CO.
    // (L + W + CO) / (W + L - CO) = 5/3 -> 3L + 3W + 3CO = 5L + 5W - 5CO -> 8CO = 2L + 2W -> 4CO = L + W.
    // Given CO = 50m, we get L + W = 4 * 50 = 200m.
    // The problem doesn't specify L and W individually, so we can't find the exact ratio of CO to CD (L).
    // For a reasonable visual representation, let's assume L=150m, W=50m (L+W=200).
    // Then the ratio CO/CD = 50/150 = 1/3.
    // So, we'll place O at 1/3 of the way along the bottom edge CD, starting from C.
    const O_x = C.x + rectWidth / 3;
    const O_y = C.y;

    // Draw the point O as a solid black circle
    ctx.beginPath();
    ctx.arc(O_x, O_y, 4, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'black';
    ctx.fill();
    
    // Draw the label for O, positioned below the point.
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('O', O_x, O_y + 8);

</script>
</body>
</html>